<template>
  <!-- 瀑布式协作项目详情 -->
  <div class="survey">
    <div class="title">
      <div class="des">
        <el-select
          placeholder=""
          v-model="value1"
          popper-class="popper-select"
          :popper-append-to-body="false"
          @change="selectImg($event)"
          v-show="edit === true"
        >
          <template slot="prefix">
            <img :src="value1" alt="" />
          </template>

          <el-option
            v-for="item in avatars"
            :key="item.Id"
            :label="item.src"
            :value="item.src"
          >
            <div class="proimg">
              <img class="avatar" :src="item.src" />
            </div>
          </el-option>
        </el-select>
        <img :src="listdata.logo" alt="" v-show="edit === false" />
        <div class="text">
          <p>{{ listdata.name }}</p>
          <span v-if="listdata.type === 1">瀑布式协作项目</span>
          <span v-else>软件敏捷开发项目</span>
        </div>
        <div
          class="level"
          :class="
            listdata.level <= 100
              ? 'LvOne'
              : listdata.level > 100 && listdata.level <= 200
              ? 'LvTwo'
              : 'LvThree'
          "
        >
          lv{{ listdata.level }}
        </div>
      </div>
      <div class="modify">
        <button
          @click="handleCloseProject()"
          v-if="listdata.status === 2 && nowUserType === 1"
          class="cancel"
        >
          结束项目
        </button>
        <button
          @click="handleCloseProject()"
          v-else-if="listdata.status === 2 && userType === 1"
          class="cancel"
        >
          结束项目
        </button>
        <button
          @click="changeStatus(listdata.id, listdata.status)"
          v-if="listdata.status === 1 && userType === 1"
          class="cancel"
        >
          启动项目
        </button>
        <!-- <button @click="handleDelProject()" class="cancel">删除</button> -->
        <button
          @click="handleDelProject()"
          class="cancel"
          v-if="userType === 1"
        >
          删除
        </button>
        <button
          @click="handleDelProject()"
          class="cancel"
          v-else-if="nowUserType === 1 && this.listdata.label === 2"
        >
          删除
        </button>
        <!-- <button @click="handleDelProject()" class="cancel" v-else-if="userType === 1 && this.listdata.label === 3">删除</button> -->
        <button
          @click="copyProject()"
          class="cancel"
          v-show="listdata.label === 1"
        >
          复制
        </button>
        <button
          class="edit"
          @click="startEdit"
          v-if="nowUserType === 1 || userType === 1"
        >
          编辑
        </button>
      </div>
    </div>
    <div class="phase">
      <h3>项目阶段</h3>
      <ul class="steps" @click="changProjectPhase">
        <li :class="phase >= 1 ? 'active-select-li' : ''" data-index="1">
          立项
        </li>
        <span :class="phase >= 2 ? 'active-select-span' : ''"></span>
        <li :class="phase >= 2 ? 'active-select-li' : ''" data-index="2">
          计划
        </li>
        <span :class="phase >= 3 ? 'active-select-span' : ''"></span>

        <li :class="phase >= 3 ? 'active-select-li' : ''" data-index="3">
          执行中
        </li>
        <span :class="phase >= 4 ? 'active-select-span' : ''"></span>

        <li :class="phase >= 4 ? 'active-select-li' : ''" data-index="4">
          结项
        </li>
        <span :class="phase >= 5 ? 'active-select-span' : ''"></span>

        <li :class="phase >= 5 ? 'active-select-li' : ''" data-index="5">
          完成项目
        </li>
      </ul>
    </div>
    <div class="infotable">
      <table cellpadding="0" cellspacing="0">
        <tr height="120">
          <td width="25%">
            <div class="missioner">
              <span>项目负责人:</span>
              <div v-if="listdata.managerList">
                <div
                  class="missionerinfo"
                  v-for="item in listdata.managerList.slice(0, 1)"
                  :key="item.index"
                >
                  <!-- <p v-if="item.roleName">{{ item.roleName }}</p>
                  <p v-else>&nbsp;</p> -->
                  <template v-if="(item.roleName.length = 1)">
                    <p v-for="(item1, index) in item.roleName" :key="index">
                      <template v-if="item1">
                        {{ item1.rolename }}
                      </template>
                    </p>
                  </template>
                  <template v-else-if="(item.roleName.length = 0)">
                    <p>&nbsp;</p>
                  </template>
                  <img :src="item.avatar" alt="" />
                  <p>{{ item.name }}</p>
                </div>
              </div>
              <!-- <img
                class="choosemember"
                @click="chooseMissioner = true"
                src="@/assets/missionerplus.png"
                alt=""
                v-show="edit === true"
              /> -->
              <!-- 选择项目负责人 -->
              <!-- <el-dialog
                :visible.sync="chooseMissioner"
                :show-close="false"
                :close-on-click-modal="false"
                :close-on-press-escape="false"
                center
              >
                <div class="diaheader">选择项目负责人</div>
                <div class="diacontentbox">
                  <div>
                    <h4
                      style="
                        font-size: 16px;
                        color: #333333;
                        margin-bottom: 14px;
                        margin-top: 0px;
                      "
                    >
                      已选项目负责人
                    </h4>
                    <div class="hadchoosenmembers">
                      <div v-if="this.chargeRoleNameList.length === 0">
                        暂无人员
                      </div>
                      <div
                        v-for="item in this.chargeRoleNameList"
                        :key="item.id"
                      >
                        <div class="choosenmem" slot="reference">
                          <p>{{ item.site }}</p>
                          <img :src="item.avatar" alt="" />
                          <p style="color: #333333">{{ item.name }}</p>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="searchbox">
                    <h4
                      style="font-size: 16px; color: #333333; margin: 14px 0px"
                    >
                      人员列表
                    </h4>
                    <div class="inputborder">
                      <input
                        type="text"
                        placeholder="搜索"
                        class="search"
                        style="border-radius: 25px"
                      />
                      <i class="el-icon-search icon"></i>
                    </div>
                  </div>
                  <div class="diacontent" style="text-align: left">
                    <ul>
                      <li v-for="(item, index) in group" :key="index">
                        <img :src="item.avatar" alt="" />
                        <span class="itemName">{{ item.name }}</span>
                        <div>项目副助理</div>
                        <div class="first">组长</div>
                        <div>副组长</div>
                        <div>组员</div>
                        <input
                          class="checkBoxs"
                          v-model="item.checked"
                          name="charge"
                          type="radio"
                          @change="getboxValue($event, item)"
                        />
                      </li>
                    </ul>
                  </div>
                </div>
                <span slot="footer" class="dialog-footer">
                  <el-button @click="onClose">取 消</el-button>
                  <el-button type="primary" @click="btnOk">确 定</el-button>
                </span>
              </el-dialog> -->
            </div>
          </td>
          <td colspan="2" width="50%">
            <div class="missioner">
              <span>项目成员:</span>
              <div v-if="listdata.groupUserName" class="roleDiv">
                <div
                  class="missionerinfo"
                  v-for="item in listdata.groupUserName.slice(0, 8)"
                  :key="item.id"
                >
                  <!-- <p>{{ item.roleName }}</p> -->
                  <template
                    v-if="item.roleName.length > 0 && item.roleName.length < 2"
                  >
                    <p v-for="item1 in item.roleName" :key="item1.id">
                      <template v-if="item1">
                        {{ item1.rolename }}
                      </template>
                    </p>
                  </template>
                  <template v-else-if="item.roleName.length === 0">
                    <p>&nbsp;</p>
                  </template>
                  <template v-else>
                    <p>多个角色</p>
                  </template>
                  <img :src="item.avatar" alt="" />
                  <p>{{ item.name }}</p>
                </div>
                <div
                  class="moremissioner"
                  v-if="
                    listdata.groupUserName && listdata.groupUserName.length > 8
                  "
                >
                  <span>等{{ listdata.groupUserName.length }}人</span>
                </div>
              </div>
              <img
                class="choosemember"
                @click="openMemner"
                src="@/assets/missionerplus.png"
                alt=""
                v-show="edit === true"
              />
              <!-- 选择项目成员 -->
              <!-- <el-dialog
                :visible.sync="choosemembers"
                :show-close="false"
                :close-on-click-modal="false"
                :close-on-press-escape="false"
                center
                class="customDialog2"
              >
                <div class="diaheader">选择项目成员</div>
                <div class="diacontentbox">
                  <div>
                    <h4
                      style="
                        font-size: 16px;
                        color: #333333;
                        margin-bottom: 14px;
                        margin-top: 0px;
                      "
                    >
                      已选项目成员
                    </h4>
                    <div class="hadchoosenmembers">
                      <div
                        v-for="item in listdata.groupUserName"
                        :key="item.id"
                      >
                        <div class="choosenmem" slot="reference">
                          <p>{{ item.site }}</p>
                          <img :src="item.avatar" alt="" />
                          <p style="color: #333333">{{ item.name }}</p>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="searchbox">
                    <h4
                      style="font-size: 16px; color: #333333; margin: 14px 0px"
                    >
                      人员列表
                    </h4>
                    <div class="inputborder">
                      <input
                        type="text"
                        placeholder="搜索"
                        class="search"
                        style="border-radius: 25px"
                      />
                      <i class="el-icon-search icon"></i>
                    </div>
                  </div>
                  <div class="diacontent" style="text-align: left">
                    <ul>
                      <li v-for="(item, index) in group" :key="index">
                        <img :src="item.avatar" alt="" />
                        <span class="itemName">{{ item.name }}</span>
                        <div>项目副助理</div>
                        <div class="first">组长</div>
                        <div>副组长</div>
                        <div>组员</div>
                        <input
                          class="checkBoxs"
                          v-model="item.checked"
                          type="checkbox"
                          @change="getboxValue1($event, item)"
                        />
                      </li>
                    </ul>
                  </div>
                </div>
                <span slot="footer" class="dialog-footer">
                  <el-button @click="onClose1">取 消</el-button>
                  <el-button type="primary" @click="btnOk1">确 定</el-button>
                </span>
              </el-dialog> -->
            </div>
          </td>
          <td width="25%">
            <div style="display: flex; align-items: center">
              <span>项目进度及状态:</span>
              <div class="domany">
                <!-- <span
                  :class="listdata.progress <= 15 ? 'many' : 'many1'"
                  :style="{ width: listdata.progress + '%' }"
                  >{{ listdata.progress }}%</span
                > -->
                <el-progress
                  class="progressBox1"
                  :text-inside="true"
                  :stroke-width="20"
                  v-if="listdata.progress"
                  :percentage="Number(listdata.progress)"
                ></el-progress>
              </div>

              <span class="manystatus notstart" v-if="listdata.status === 1"
                >未开始</span
              >
              <span
                class="manystatus completed"
                v-else-if="listdata.status === 3"
                >已完成</span
              >
              <span class="manystatus ongoing" v-else>进行中</span>
            </div>
          </td>
        </tr>
        <tr>
          <td>
            <span>项目组名称:</span>
            <input
              type="text"
              v-show="edit === true"
              v-model="listdata.groupName"
              placeholder="请输入项目组名称"
              style="width: 70%"
              maxlength="25"
            />
            <span v-show="edit === false">{{ listdata.groupName }}</span>
          </td>
          <td colspan="2">
            <span>项目名称:</span>
            <input
              type="text"
              v-show="edit === true"
              style="width: 80%"
              placeholder="请输入项目名称"
              v-model="listdata.name"
              maxlength="25"
            />
            <span v-show="edit === false">{{ listdata.name }}</span>
          </td>
          <td>
            <span>客户信息:</span>
            <input
              type="text"
              v-show="edit === true"
              placeholder="请输入客户信息"
              v-model="listdata.clientInfo"
              maxlength="25"
            />
            <span v-show="edit === false">{{ listdata.clientInfo }}</span>
          </td>
        </tr>
        <tr>
          <td>
            <span>开始时间:</span>
            <el-date-picker
              size="mini"
              v-model="listdata.startDate"
              align="right"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择项目开始日期"
              v-show="edit === true"
            >
            </el-date-picker>
            <span v-show="edit === false">{{ listdata.startDate }}</span>
          </td>
          <td>
            <span>结束时间:</span>
            <el-date-picker
              size="mini"
              v-model="listdata.endDate"
              align="right"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择项目结束日期"
              v-show="edit === true"
            >
            </el-date-picker>
            <span v-show="edit === false">{{ listdata.endDate }}</span>
          </td>
          <td>
            <span>项目周期:</span>
            <span>{{ listdata.developmentPeriod }}</span>
          </td>
          <td>
            <span>过期：</span>
            <span>{{ listdata.day }}</span>
          </td>
        </tr>
        <tr v-if="userType === 1">
          <td>
            <span>项目编号:</span>
            <span>{{ listdata.code }}</span>
          </td>
          <td>
            <span>创建人:</span>
            <span v-for="(item, id) in listdata.createList" :key="id"
              >{{ item.name }}&nbsp;&nbsp;&nbsp;</span
            >
            <img
              class="choosemember"
              @click="chooseCreater = true"
              src="@/assets/missionerplus.png"
              alt=""
              v-show="edit === true"
            />
            <!-- 选择项目创建人 -->
            <!-- <el-dialog
              :visible.sync="chooseCreater"
              :show-close="false"
              :close-on-click-modal="false"
              :close-on-press-escape="false"
              center
            >
              <div class="diaheader">选择项目创建人</div>
              <div class="diacontentbox">
                <div>
                  <h4
                    style="
                      font-size: 16px;
                      color: #333333;
                      margin-bottom: 14px;
                      margin-top: 0px;
                    "
                  >
                    已选项目创建人
                  </h4>
                  <div class="hadchoosenmembers">
                    <div v-if="createRoleNameList.length === 0">暂无人员</div>
                    <div v-for="item in createRoleNameList" :key="item.id">
                      <div class="choosenmem" slot="reference">
                        <p>{{ item.site }}</p>
                        <img :src="item.avatar" alt="" />
                        <p style="color: #333333">{{ item.name }}</p>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="searchbox">
                  <h4 style="font-size: 16px; color: #333333; margin: 14px 0px">
                    人员列表
                  </h4>
                  <div class="inputborder">
                    <input
                      type="text"
                      placeholder="搜索"
                      class="search"
                      style="border-radius: 25px"
                    />
                    <i class="el-icon-search icon"></i>
                  </div>
                </div>
                <div class="diacontent" style="text-align: left">
                  <ul>
                    <li v-for="(item, index) in group" :key="index">
                      <img :src="item.avatar" alt="" />
                      <span class="itemName">{{ item.name }}</span>
                      <div>项目副助理</div>
                      <div class="first">组长</div>
                      <div>副组长</div>
                      <div>组员</div>
                      <input
                        class="checkBoxs"
                        v-model="item.checked"
                        name="charge"
                        type="radio"
                        @change="getboxValue($event, item)"
                      />
                    </li>
                  </ul>
                </div>
              </div>
              <span slot="footer" class="dialog-footer">
                <el-button @click="onClose">取 消</el-button>
                <el-button type="primary" @click="btnOk">确 定</el-button>
              </span>
            </el-dialog> -->
          </td>
          <td>
            <span>项目等级:</span>
            <input
              type="number"
              v-show="edit === true"
              v-model="listdata.level"
              placeholder="请输入项目等级"
              oninput="if(value.length>3)value=value.slice(0,3)"
              @input="isTrueNum($event)"
            />
            <span v-show="edit === false">{{ listdata.level }}</span>
          </td>
          <td>
            <span>项目类型:</span>
            <span v-if="listdata.label === 2">自建</span>
            <span v-else-if="listdata.label === 1">模板</span>
            <span v-else-if="listdata.label === 3">复制</span>
          </td>
        </tr>
        <tr v-if="userType === 1">
          <td colspan="2">
            <span>评分表:</span>
            <span v-show="edit === false">{{
              this.listdata.evaluationName
            }}</span>
            <el-select
              placeholder="请选择评分表"
              v-model="listdata.evaluationName"
              v-show="edit === true"
              @change="selectEva($event)"
              style="width: 30%"
            >
              <el-option
                v-for="item in optionSelect"
                :key="item.index"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </td>
          <td colspan="2">
            <span>课时数:</span>
            <span v-show="edit === false">{{ listdata.hours }}</span>
            <input
              type="number"
              v-show="edit === true"
              v-model.number="listdata.hours"
              style="width: 60%"
              oninput="if(value.length>3)value=value.slice(0,3)"
              placeholder="请输入课时数"
              @input="isTrueNum1($event)"
            />
          </td>
        </tr>
      </table>
    </div>

    <!-- 编辑弹层 -->
    <editWFProject
      ref="editChild"
      :phase.sync="this.phase"
      :value1.sync="this.value1"
      @updateList="initPage"
      @updatePhase="updatePhase"
    ></editWFProject>
    <div class="footertab">
      <a
        href="javasript:void(0);"
        :class="index == isactive ? 'active' : ''"
        @click="handelchange(index)"
        :key="index"
        v-for="(item, index) in footertablist"
      >
        {{ item.name }}
        <span class="litline"></span>
      </a>
    </div>
    <dosth
      :is="footerview"
      :logVoList.sync="logList"
      :commentList="commentList"
      :commentUserId="userid"
      keep-alive
    >
    </dosth>
  </div>
</template>

<script>
// 组件
import dosth from '../footertab/dosth.vue';
import projectinfo from '../footertab/projectinfo';
import editWFProject from '../editcompoents/editWFProject.vue';
// api
import { getprodetail, finishProject } from '@/api/project/prodetail';
import { copyProject } from '@/api/project/survey';
import { updateProject, getSameUser } from '@/api/project/buildProject';
import { getevaluation } from '@/api/project/getevaluation';
import { delProject, modifyStatus } from '@/api/project/projectlist';

// import qs from 'querystring';

export default {
  name: 'survey',
  data() {
    return {
      // 使用者类型
      userType: Number(sessionStorage.getItem('usertype')),
      userid: Number(sessionStorage.getItem('userid')),
      // 项目负责人选择
      chargeRoleNameList: [],
      chooseMissioner: false,
      // 项目成员选择
      donemembers: [],
      hadmembers: [],
      choosemembers: false,
      // 项目创建人选择
      createRoleNameList: [],
      chooseCreater: false,
      edit: false,
      logList: [],
      optionSelect: [],
      // 评分表值
      value: '',
      // 头像值
      value1: '',
      // 同一组织机构人员
      group: [],
      avatars: [
        {
          src: '/static/project1.png',
          Id: '0'
        },
        {
          src: '/static/project2.png',
          Id: '1'
        },
        {
          src: '/static/project3.png',
          Id: '2'
        },
        {
          src: '/static/project4.png',
          Id: '3'
        },
        {
          src: '/static/project5.png',
          Id: '4'
        }, {
          src: '/static/project6.png',
          Id: '5'
        }
      ],
      newData:
      {
        project: {
          clientinfo: null,
          enddate: '',
          evaluationid: null,
          groupname: '',
          createdid: null,
          id: 0,
          level: 1,
          managerid: null,
          name: '',
          phase: null,
          startdate: '',
          hours: null
        },
        projectuserList: [
          {
            createtime: '',
            evaluationroleid: null,
            id: null,
            projectid: null,
            rolename: '',
            type: null,
            userid: null
          }
        ]

      },
      // 项目进度
      progress: Number,
      commentList: [],
      btnstate: false,
      phase: '',
      isactive: 0,
      // footerview: 'dosth',
      footertablist: [
        { name: '项目评论' },
        { name: '操作日志' }
      ],
      currentView: 'projectinfo',
      footerview: 'projectinfo', // 评论和日志转换器
      listdata: [],
      nowUserType: 0 // 用于存储当前登录的用于是否为当前项目的创建人或者负责人
    };
  },
  components: {
    dosth,
    projectinfo,
    editWFProject
  },
  mounted() {
    this.initPage();
    // 获取该项目评分表
    getevaluation(this.userid).then(res => {
      this.optionSelect = res.data;
      // console.log(this.optionSelect);
    });
    // 获取同一机构人员
    getSameUser(this.userid).then(res => {
      // console.log(res);
      this.group = res.data;
    });
  },
  methods: {
    updatePhase(val) {
      this.phase = val;
    },
    initPage() {
      // console.log('ok');
      // 获取该项目详情
      getprodetail(Number(localStorage.getItem('projectId')), Number(sessionStorage.getItem('usertype'))).then(res => {
        console.log(res);
        // console.log('res', JSON.parse(JSON.stringify(res.data)));
        this.listdata = res.data;
        this.phase = res.data.phase;
        this.logList = res.data.logList;
        this.commentList = res.data.commentList;
        this.value1 = res.data.logo;
        this.managerList = this.chargeRoleNameList;
        sessionStorage.setItem('projectLabel', res.data.label);
        // 判断是否为当前项目的负责人
        res.data.managerList.forEach(item => {
          if (item.id === this.userid) {
            console.log(item);
            this.nowUserType = 1;
          }
        });
        res.data.createList.forEach(item => {
          if (item.id === this.userid) {
            console.log(item);
            this.nowUserType = 1;
          }
        });
        sessionStorage.setItem('nowUserType', this.nowUserType);
      });
    },
    // 打开弹窗
    openMemner() {
      this.choosemembers = true;
      const chooseUser = this.listdata.groupUserName;
      this.group.forEach(item => {
        chooseUser.forEach(element => {
          if (item.id === element.id) {
            item.checked = true;
          }
        });
      });
    },
    // 点击编辑
    startEdit() {
      this.$refs.editChild.openEdit();
      // this.edit = !this.edit;
      // this.showDialog = true;
      // this.
    },
    // 取消确认负责人弹窗
    onClose() {
      this.chargeRoleNameList = [];
      this.chooseMissioner = false;
    },
    btnOk() {
      // this.newData.chargeid = this.chargeRoleNameList[0].userId;
      this.chooseMissioner = false;
    },
    // 取消确认负责人弹窗
    onClose1() {
      this.donemembers = [];
      this.choosemembers = false;
    },
    btnOk1() {
      // this.newData.chargeid = this.chargeRoleNameList[0].userId;
      this.choosemembers = false;
    },
    // 取消确认创建人弹窗
    onClose2() {
      this.createRoleNameList = [];
      this.chooseCreater = false;
    },
    btnOk2() {
      // this.newData.chargeid = this.chargeRoleNameList[0].userId;
      this.chooseCreater = false;
    },
    // 选取项目头像
    selectImg(val) {
      console.log(val);
      this.value1 = val;
    },
    // 选择评分表
    selectEva(e) {
      console.log(e);
      this.value = e;
    },
    // 切换评论和日志
    handelchange(index) {
      this.isactive = index;
      if (index === 0) {
        this.footerview = 'projectinfo';
      } else {
        this.footerview = 'dosth';
      }
    },
    // 判断输入数字等级
    isTrueNum(event) {
      if (event.target.value > 300 || event.target.value <= 0) {
        this.$message({
          showClose: true,
          type: 'warning',
          message: '请输入1-300的数字'
        });
        // event.target.value = 1;
        this.listdata.level = null;
      }
    },
    // 判断输入数字课时
    isTrueNum1(event) {
      console.log(event.target.value);
      if (event.target.value > 1000 || event.target.value <= 0) {
        this.$message({
          showClose: true,
          type: 'warning',
          message: '请输入1-999的数字'
        });
        // event.target.value = 1;
        this.listdata.hours = null;
      }
    },
    // 删除按钮
    handleDelProject() {
      console.log('shanchu');
      this.$confirm('是否删除该项目?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delProject(Number(this.$route.params.projectId)).then(res => {
          console.log(res);
          if (res.code === 200) {
            this.$message({
              showClose: true,
              type: 'success',
              message: '项目已成功删除'
            });
            this.$router.push('Project');
          } else {
            this.$message({
              showClose: true,
              type: 'warning',
              message: res.msg
            });
          }
        });
      }).catch(() => {
        this.$message({
          showClose: true,
          type: 'info',
          message: '取消删除'
        });
      });
    },
    // 关闭项目按钮
    handleCloseProject() {
      console.log('guanbi');
      if (this.listdata.status === 3) {
        this.$message({
          showClose: true,
          type: 'info',
          message: '当前项目为已完成，无需修改'
        });
      } else if (this.listdata.status === 1) {
        this.$message({
          showClose: true,
          type: 'info',
          message: '当前项目还未启动'
        });
      } else {
        this.$confirm('是否修改项目状态为已完成?', '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          finishProject(this.$route.params.projectId).then(res => {
            console.log(res);
            if (res.code === 200) {
              this.$message({
                showClose: true,
                type: 'success',
                message: '修改成功'
              });
              this.listdata.status = 3;
              this.listdata.progress = 100;
              this.phase = 5;
            }
          });
        }).catch(() => {
          this.$message({
            showClose: true,
            type: 'info',
            message: '取消修改'
          });
        });
      }
    },
    // 修改项目状态为启动项目
    changeStatus(data, data1) {
      if (data1 === 2) {
        this.$message({
          showClose: true,
          type: 'info',
          message: '当前项目已启动'
        });
      } else if (data1 === 3) {
        this.$message({
          showClose: true,
          type: 'info',
          message: '当前项目已完成'
        });
      } else {
        this.$confirm('是否启动该项目！', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let changeArray = [];
          changeArray.push(data);
          modifyStatus(changeArray).then(res => {
            // this.$router.go(0);
            this.initPage();
            this.$message({
              showClose: true,
              type: 'success',
              message: '启动成功!'
            });
          });
        }).catch(() => {
          this.$message({
            showClose: true,
            type: 'info',
            message: '取消启动'
          });
        });
      }
    },
    // 复制按钮
    copyProject() {
      copyProject(Number(this.$route.params.projectId), Number(sessionStorage.getItem('userid'))).then(res => {
        console.log(res);
        if (res.code === 200) {
          this.$message({
            showClose: true,
            type: 'success',
            message: '复制成功!'
          });
        } else {
          this.$message({
            showClose: true,
            type: 'info',
            message: res.msg
          });
        }
      });
    },
    // 取消编辑按钮
    cancelEdit() {
      this.$confirm('是否取消编辑?当前更改的内容将不会保存！', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.edit = false;
        this.$message({
          showClose: true,
          type: 'success',
          message: '编辑内容已取消!'
        });
      }).catch(() => {
        this.$message({
          showClose: true,
          type: 'info',
          message: '继续编辑'
        });
      });
    },
    // 确认按钮
    confirmEdit() {
      this.$confirm('是否完成编辑?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.newData.project.clientinfo = this.listdata.clientInfo;
        this.newData.project.enddate = this.listdata.endDate;
        this.newData.project.evaluationid = this.value;
        this.newData.project.groupname = this.listdata.groupName;
        this.newData.project.id = this.listdata.id;
        this.newData.project.level = this.listdata.level;
        this.newData.project.name = this.listdata.name;
        this.newData.project.phase = this.listdata.phase;
        this.newData.project.startdate = this.listdata.startDate;
        this.newData.project.phase = this.phase;
        this.newData.project.hours = Number(this.listdata.hours);
        this.newData.project.createdid = this.listdata.createdId;
        this.newData.project.logo = this.value1;
        let update = JSON.stringify(this.newData);
        if (!this.newData.project.name || !this.newData.project.level) {
          return this.$message({
            showClose: true,
            type: 'warning',
            message: '项目名称、项目等级不能为空或检查完善其他信息！'
          });
        }
        updateProject(update).then(res => {
          console.log('修改保存成功', this.newData, res);
          if (res.code === 200) {
            this.edit = !this.edit;
            this.$message({
              showClose: true,
              type: 'success',
              message: '修改内容已保存!'
            });
            // 获取该项目详情
            getprodetail(Number(this.$route.params.projectId), Number(sessionStorage.getItem('usertype'))).then(res => {
              console.log(JSON.parse(JSON.stringify(res.data)));
              this.listdata = res.data;
              this.phase = res.data.phase;
              this.logList = res.data.logList;
            });
          } else {
            this.$message({
              showClose: true,
              type: 'warning',
              message: res.msg
            });
          }
        });
      }).catch(() => {
        this.$message({
          showClose: true,
          type: 'info',
          message: '继续编辑'
        });
      });
    },
    // 编辑时可修改项目状态
    changProjectPhase(e) {
      console.log(e.target.dataset.index);
      if (this.edit) {
        this.phase = e.target.dataset.index;
      }
    }
  }
};
</script>

<style lang="less" scoped>
.survey {
  width: 100%;
  min-height: 836px;
  background-color: #ffffff;
  box-shadow: 1px -2px 3px 0px rgba(153, 153, 153, 0.5),
    1px 2px 3px 0px rgba(153, 153, 153, 0.5);
  border-radius: 0 5px 5px 5px;
  margin-top: -4px;
  .title {
    width: 98%;
    height: 45px;
    margin: 0 auto;
    padding-top: 36px;
    margin-bottom: 38px;
    position: relative;
    .des {
      width: 440px;
      height: 45px;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      .avatar {
        width: 41px;
        height: 41px;
        position: absolute;
        left: 20%;
        top: 15%;
      }
      img {
        width: 45px;
        height: 45px;
      }
      .text {
        margin-left: 20px;
        p {
          margin: 0;
          font-size: 16px;
          font-weight: 400;
          color: #222222;
          line-height: 28px;
        }
        span {
          font-size: 12px;
          font-weight: 400;
          color: #555555;
          line-height: 20px;
        }
      }
      .level {
        align-self: flex-start;
        text-align: center;
        font-size: 12px;
        font-family: SukhumvitSet-Bold, SukhumvitSet;
        font-weight: bold;
        color: #ffffff;
        line-height: 21px;
        font-weight: bold;
        width: 60px;
        height: 21px;
        border-radius: 10px;
        margin-top: 5px;
        margin-left: 20px;
      }
      .LvOne {
        background: #c5f5d1;
      }
      .LvTwo {
        background: #f7cbd2;
      }
      .LvThree {
        background: #cbd5f5;
      }
    }
  }
  .modify {
    width: auto;
    height: 40px;
    position: absolute;
    top: 36px;
    right: 0;
    button {
      width: 115px;
      height: 40px;
      font-size: 16px;
      font-weight: 400;
      line-height: 40px;
      text-align: center;
      border-radius: 4px;
      margin-left: 18px;
      cursor: pointer;
    }
    .cancel {
      background: #e8f8fb;
      color: #2fc0e0;
    }
    .edit {
      background: #2fc0e0;
      color: #ffffff;
      box-shadow: 0 0 5px #2fc0e0;
    }
    .finish {
      background: #2fc0e0;
      color: #ffffff;
      box-shadow: 0 0 5px #2fc0e0;
    }
  }
  .infotable {
    width: 98%;
    margin: 0 auto;
    margin-bottom: 30px;
    border-left: 1px solid #f1f4ff;
    border-top: 1px solid #f1f4ff;
    span {
      font-size: 14px;
      color: #333;
    }
    table {
      width: 100%;
      margin: 0 auto;
      .choosemember {
        cursor: pointer;
        width: 40px;
        height: 40px;
        margin-left: 10px;
        vertical-align: middle;
      }
      tr {
        td:focus-within {
          box-shadow: inset 0px 1px 4px 0px #2fc0e0,
            inset 0px -1px 4px 0px #2fc0e0, inset 1px 0px 4px 0px #2fc0e0,
            inset -1px 0px 4px 0px #2fc0e0;
        }
        td {
          padding-left: 20px;
          height: 60px;
          text-align: left;
          border-bottom: 1px solid #f1f4ff;
          border-right: 1px solid #f1f4ff;
          .diaheader {
            width: 100%;
            height: 60px;
            background: #f1f5ff;
            text-align: center;
            line-height: 60px;
            color: #333333;
            font-weight: bold;
            font-size: 14px;
          }
          .diacontentbox {
            padding: 20px;
            // width: calc(100% - 40px);
            box-sizing: border-box;

            .hadchoosenmembers {
              height: 90px;
              width: 100%;
              overflow-x: auto;
              display: flex;
              .choosenmem {
                width: 70px;
                text-align: center;
                p {
                  width: 100%;
                  height: 15px;
                  margin: 0;
                  text-align: center;
                  font-size: 12px;
                  color: #555;
                }
                img {
                  width: 50px;
                  height: 50px;
                  border-radius: 50px;
                }
              }
            }
          }
          .searchbox {
            margin-top: 15px;
            .inputborder {
              margin: 0 auto;
              width: calc(100% - 40px);
              height: 50px;
              // background: linear-gradient(270deg, #1160cf 0%, #cd06bf 100%);
              border-radius: 25px;
              position: relative;
            }
            .search {
              outline: none;
              width: 100%;
              margin: 0 auto;
              height: 44px;
              border: 1px solid #eeeeee;
              border-radius: 25px;
              background-clip: padding-box;
              text-align: center;
            }
            .icon {
              display: inline-block;
              width: 40px;
              height: 40px;
              line-height: 40px;
              text-align: center;
              background-color: #2fc0e0;
              border-radius: 50%;
              color: #fff;
              position: absolute;
              right: 5px;
              top: 5px;
            }
          }
          .diacontent {
            width: 100%;
            height: 350px;
            margin: 0 auto;
            overflow-y: auto;
            ul {
              width: 100%;
              li {
                width: 100%;
                padding: 20px 0;
                display: inline-block;
                border-bottom: 1px solid #f2f2f2;
                height: 60px;
                line-height: 60px;
                display: flex;
                align-items: center;
                position: relative;
                .memberName {
                  margin: 0 20px;
                  color: #333333;
                  font-size: 14px;
                  font-weight: bold;
                }
                .checkBoxs {
                  width: 25px;
                  height: 25px;
                  position: absolute;
                  right: 20px;
                }
                div {
                  background: #f2f2f2;
                  width: 100px;
                  height: 40px;
                  margin: 0 15px;
                  border-radius: 11px;
                  text-align: center;
                  line-height: 40px;
                  color: #555;
                  font-size: 14px;
                }
                .first {
                  background: #ffd167;
                  color: #fff;
                }
              }
            }
          }
          input {
            border: none;
            width: 80%;
            height: 80%;
            outline: none;
            transition: all 0.3s;
            border-radius: 5px;
          }

          select {
            border: none;
            width: 65%;
            height: 80%;
            outline: none;
            transition: all 0.3s;
            border-radius: 5px;
          }
          select:hover {
            box-shadow: 2px 2px 4px 0px #2fc0e0;
          }
          .missioner {
            display: flex;
            align-items: center;
            .editspan {
              margin: 0 10px;
              display: inline-block;
              width: 100px;
              height: 40px;
              background: #e8f8fb;
              border-radius: 4px;
              color: #555;
              line-height: 40px;
              text-align: center;
            }
            .missionerinfo {
              display: inline-block;
              text-align: center;
              p {
                font-size: 12px;
                margin: 0;
                color: #555;
              }
              img {
                width: 45px;
                height: 45px;
                border-radius: 50%;
                box-shadow: 1px 1px 3px #d7d7d7;
              }
            }
            .moremissioner {
              width: 40px;
              height: 40px;
              border-radius: 50%;
              background: #e8f8fb;
              box-shadow: 1px 1px 3px #d7d7d7;
              border: 3px solid #ffffff;
              color: #e8f8fb;
              text-align: center;
              line-height: 40px;
              span {
                font-size: 12px;
                color: #2fc0e0;
              }
            }
            img {
              width: 70px;
              height: 70px;
              margin: 0 10px;
            }
            .choosemember {
              cursor: pointer;
              width: 40px;
              height: 40px;
            }
          }
          /deep/ .progressBox1 .el-progress-bar__outer {
            background-color: #ebeef5;
            height: 20px !important;
          }
          .domany {
            // border: 1px solid #6c59cc;
            width: 150px;
            height: 20px;
            // border-radius: 16px;
            margin: 0 10px;
            // padding: 4px;
            // .many {
            //   display: inline-block;
            //   height: 100%;
            //   background-image: linear-gradient(
            //     270deg,
            //     #1160cf 0%,
            //     #cd06bf 100%
            //   );
            //   border-radius: 12px;
            //   vertical-align: top;
            //   text-align: center;
            //   color: black;
            //   line-height: 24px;
            // }
            // .many1 {
            //   display: inline-block;
            //   height: 100%;
            //   background-image: linear-gradient(
            //     270deg,
            //     #1160cf 0%,
            //     #cd06bf 100%
            //   );
            //   border-radius: 12px;
            //   vertical-align: top;
            //   text-align: center;
            //   color: white;
            //   line-height: 24px;
            // }
          }
          .manystatus {
            display: inline-block;
            font-size: 14px;
          }
          .ongoing {
            color: #ffd167;
          }
          .ongoing::before {
            content: "";
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #ffd167;
            margin-right: 3px;
            box-shadow: 0 0 3px #ffd167;
          }
          .notstart {
            color: #555555;
          }
          .notstart::before {
            content: "";
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #555555;
            margin-right: 3px;
            box-shadow: 0 0 3px #555555;
          }
          .completed {
            color: #3ea528;
          }
          .completed::before {
            content: "";
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #3ea528;
            margin-right: 3px;
            box-shadow: 0 0 3px #3ea528;
          }
        }
      }
    }
  }
  .phase {
    width: 98%;
    margin: 0 auto;
    margin-bottom: 30px;
    h3 {
      font-size: 14px;
      color: #333333;
    }
    ul {
      height: 75px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      li {
        width: 240px;
        height: 73px;
        text-align: center;
        line-height: 73px;
        font-size: 18px;
        color: #555555;
        border-radius: 8px;
        border: 1px solid #e8f8fb;
      }
      .active-select-li {
        background: #e8f8fb;

        color: #2fc0e0;
      }
      span {
        width: 35px;
        height: 35px;
        text-align: center;
        font-size: 30px;
        font-weight: bold;
        line-height: 35px;
        color: #eeeeee;
        background: url("~@/assets/phase1.png") no-repeat center center;
        background-size: 100% 100%;
      }
      .active-select-span {
        background: url("~@/assets/phase2.png") no-repeat center center;
        background-size: 100% 100%;
      }
    }
  }
  input {
    border: none;
    width: 80%;
    height: 80%;
    outline: none;
    transition: all 0.3s;
    border-radius: 5px;
  }
  .roleDiv {
    display: flex;
    align-items: center;
  }

  select {
    border: none;
    width: 65%;
    height: 80%;
    outline: none;
    transition: all 0.3s;
    border-radius: 5px;
  }
  select:hover {
    box-shadow: 2px 2px 4px 0px #2fc0e0;
  }
  /deep/ .el-input__inner {
    border: none;
  }
  /deep/.el-select-dropdown__item.hover,
  .el-select-dropdown__item:hover {
    // width: 45px !important;
    // height: 45px !important;
    background-color: #2fc0e0;
  }
  .footertab {
    text-align: left;
    margin-top: 20px;
    width: 98%;
    a {
      color: rgb(94, 94, 94);
      font-size: 14px;
      margin: 0 20px;
    }
    .active {
      color: #111;
      font-size: 18px;
      font-weight: bolder;
      position: relative;
      .litline {
        position: absolute;
        bottom: -10px;
        left: 25%;
        display: inline-block;
        width: 35px;
        height: 8px;
        border-radius: 4px;
        background: linear-gradient(270deg, #1160cf 0%, #cd06bf 100%);
      }
    }
  }
  // 头像样式
  /deep/.el-select {
    width: 74px;
    height: 45px;
    border: none;
  }
  /deep/.el-select-dropdown__item {
    width: 68px !important;
    height: 68px !important;
    border-radius: 7px;
    padding: 0;
    margin: 0 auto;
    position: relative;
  }
  /deep/.el-select-dropdown__item.hover,
  .el-select-dropdown__item:hover {
    // width: 45px !important;
    // height: 45px !important;
    background-color: #2fc0e0;
  }
  /deep/.el-select-dropdown__item.hover,
  .el-select-dropdown__item:hover {
    img {
      width: 45px !important;
      height: 45px !important;
      left: 16% !important;
      top: 17% !important;
    }
  }

  /deep/ .el-input__inner {
    border: none;
  }
  /deep/.el-select-dropdown__list {
    height: 420px !important;
  }
  /deep/.el-select-dropdown__wrap {
    max-height: 430px !important;
    box-shadow: 2px 2px 4px 0px rgba(169, 184, 244, 0.5) !important;
  }

  /deep/.el-scrollbar__bar.is-vertical {
    display: none !important;
  }
  // 清除input按钮
  /deep/ input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }
  input[type="number"] {
    -moz-appearance: textfield;
  }
}
</style>
